<template>
  <div>
    <div style="text-align: left;">
      <!--<label style="margin-right: 20px;">{{languageLabel}}:</label>-->
      <el-switch
        v-model="switchState"
        active-text="中文"
        inactive-text="EN"
        @change="onSwitchChange">
      </el-switch>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Settings',
  data () {
    return {
      switchState: true,
      languageLabel: "语言"
    }
  },
  created: function () {
    let langKey = this.$i18n.locale;
    if (langKey == 'en') {
      this.switchState = false;
      this.languageLabel = "Language";
    } else {
      this.switchState = true;
      this.languageLabel = "语言";
    }
  },
  methods: {
    onSwitchChange: function (value) {
      this.switchState = value;
      if (value) {
        this.$i18n.locale = 'zh';
        this.languageLabel = "语言";
      } else {
        this.$i18n.locale = 'en';
        this.languageLabel = "Language";
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
